
<template>
  <div class="teacher-student box">
    <van-tabs type="card" color="#ff790c">
      <van-tab :title="unFinishedTabString">
        <div class="studentlist-tab-body">
          <scroll-view scroll-y :style="{height:contentHeight+'px'}">
            <StudentList :students="unGradAndDelayStudents" :route="route" @getAction="open" ></StudentList>
          </scroll-view>
        </div>
      </van-tab>
      <van-tab :title="finishedTabString">
        <div class="studentlist-tab-body">
          <scroll-view scroll-y :style="{height:contentHeight+'px'}" @scrolltolower="lower">
            <div v-for="(item,i) in gradStudents" :key="i" class="student-list-item">
              <view class="d-flex student-list-item-header">
                <div class="mr-auto d-flex pl-2 align-items-center">
                  <img class="small-avatar" :src="item.avatar | avatarUrl" />
                  <div class="student-user-info ml-1">
                    <div>{{item.name}}</div>
                    <div class="font-small">{{item.startStudyTime|date("yyyy-MM-dd")}}</div>
                  </div>
                </div>
                  <div class="d-flex  align-items-center  mr-1">
                     <div class="ability-icon position-relative" @click="open(item.abilitys,item.job)">
            <img :src="'ability-icon.png'|imgUrl" alt="" >
          </div>
                </div>
              </view>
              <view class="d-flex justify-content-around align-items-center student-list-item-content">
                <div class="mr-auto" style="width:220px;">
                  <div class="d-flex justify-content-around  p-2 text-center">
                    <div style="width:49%;">
                      <div class="pb-1 font-medium">得分</div>
                      <div>{{item.score}}</div>
                    </div>
                    <div class="border-left" style="width:49%">
                      <div class="pb-1 font-medium">出师日</div>
                      <div>{{item.gradTime|date("yyyy-MM-dd")}}</div>
                    </div>
                  </div>
                </div>
                <div @click="toHistory(item.studentId,item.name)" class="border-button-active ml-auto d-flex align-items-center justify-content-center mr-1" >
                  查看详情
                </div>
              </view>
            </div>
          </scroll-view>
        </div>
      </van-tab>
    </van-tabs>

    <div v-if="showAbility">
      <van-dialog use-slot show="true" @close="onCloseAbility" className="vant-dialog-class" catchtouchmove="preventTouchMove">
        <div class="ability-content-warpper ">
          <img :src="'dialog-bg.png'|imgUrl" alt="">
          <div class="ability-content">
            <h1 style="margin:16px 0; text-align:center;width:100%">学徒综合能力模型</h1>
            <view class="container">
              <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" :ec="ec"></ec-canvas>
            </view>
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import StudentList from '@/components/StudentList.vue'

@Component({
  components: {
    StudentList
  },
  filters: {}
})
export default class TeacherStudentList extends Vue {
  @Getter unGradAndDelayStudents;

  @Action getGradStudents;

  @Prop() contentHeight;

  public route: string = '/teacher/pages/history/index';
  public get unFinishedTabString () {
    var count = !this.unGradAndDelayStudents
      ? 0
      : this.unGradAndDelayStudents.length
    return '未出师(' + count + ')'
  }
  public get finishedTabString () {
    var count = !this.$store.state.teacher.gradStudents
      ? 0
      : this.$store.state.teacher.gradStudents.totalCount
    return '已出师(' + count + ')'
  }
  public get gradStudents () {
    return this.$store.state.teacher.gradStudents
      ? this.$store.state.teacher.gradStudents.items
      : null
  }
  public async created () {
    if (this.gradStudents === null) {
      await this.getGradStudents()
    }
  }
  public async toHistory (studentId, name) {
    Megalo.navigateTo({
      url: this.route + '?id=' + studentId + '&name=' + name
    })
  }
  public onShow () {}

  public async lower (e) {
    Megalo.showLoading({
      title: '加载中'
    })
    await this.getGradStudents()
    Megalo.hideLoading()
  }
  public ec = {
    options: {}
  };
  public open (abilitys, job) {
    if (job === 0) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '销售能力', max: 100 },
            { name: '策划能力', max: 100 },
            { name: '市场研究', max: 100 },
            { name: '管理能力', max: 100 },
            { name: '资源整合', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['XiaoShou'] || 0,
                  abilitys['CeHua'] || 0,
                  abilitys['ShiChang'] || 0,
                  abilitys['GuanLi'] || 0,
                  abilitys['ZiYuan'] || 0
                ]
              }
            ]
          }
        ]
      }
    } else if (job === 1) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '团队人员管理', max: 100 },
            { name: '团队文化锻造', max: 100 },
            { name: '业务基础精进', max: 100 },
            { name: '技术工艺创新', max: 100 },
            { name: '外部资源整合', max: 100 },
            { name: '内部资源协调', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['TuanDuiRenYuan'] || 0,
                  abilitys['TuanDuiWenHua'] || 0,
                  abilitys['YeWuJiChu'] || 0,
                  abilitys['YeWuChuangXin'] || 0,
                  abilitys['ZiYuanDuiWai'] || 0,
                  abilitys['ZiYuanDuiNei'] || 0
                ]
              }
            ]
          }
        ]
      }
    }
    this.openAbility()
  }
  public showAbility = false;
  public openAbility () {
    this.showAbility = true
  }

  public onCloseAbility () {
    this.showAbility = false
  }
}
</script>

<style lang="stylus" scoped>
.teacher-student {
  padding-top: 10px;
}
</style>
